<template>
    <div class="login-div">
        <div class="login-bg">
            <div class="login-hz">
                <div class="bgimg">
                    <img src="../views/depot/center.png">
                </div>
                <div class="login-box">
                    <h1 class="login-title">ERP系统</h1>

                    <el-form :model="formData" ref="form" :rules="rules">
                        <el-form-item prop="uname">
                            <el-input v-model="formData.uname" placeholder="请输入用户名" style="height: 38px;"
                                :prefix-icon="User" :validate-event="false"></el-input>
                        </el-form-item>
                        <el-form-item prop="upass">
                            <el-input type="password" v-model="formData.upass" placeholder="至少6位密码，区分大小写"
                                style="height: 38px;" :prefix-icon="Lock" show-password
                                :validate-event="false"></el-input>
                        </el-form-item>
                        <el-form-item prop="twopass">
                            <el-input type="password" v-model="formData.twopass" placeholder="确认密码"
                                style="height: 38px;" :prefix-icon="Lock" show-password
                                :validate-event="false"></el-input>
                        </el-form-item>
                        <el-form-item prop="identifyCode" style="margin: 0 !important; padding: 0 !important;">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-input v-model="formData.identifyCode" placeholder="请输入验证码" style="height: 38px;"
                                        :validate-event="false"></el-input>
                                </el-col>
                                <el-col :span="10">
                                    <div style="text-align: center; margin-bottom: 10px;" @click="refreshCode">
                                        <Sidentify :identifyCode="identifyCode" />
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item style="margin-top: 40px;">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-button type="primary" @click="onSubmit(form)">
                                        注册租户
                                    </el-button>
                                </el-col>
                                <el-col :span="12">
                                    <el-button type="primary" link @click="toLogin">
                                        使用已有租户登录
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from "element-plus";
import useSys from '@/store/useSys'
import Sidentify from '@/components/sidentify/Sidentify.vue';
let router = useRouter();
let sys = useSys();
//表单里面的数据模型
let formData = ref({})
//表单引用，用于调用表单对象的
let form = ref(null)
//图形验证码
let identifyCode = ref('')
//验证码出现的数字和字母
let identifyCodes = ref('1234567890abcdefjhijklinopqrsduvwxyz')

//验证表单里面的规则
let rules = {
    uname: [
        { required: true, message: "用户名不能为空" },
        { pattern: /^[a-zA-Z]{5,}$/, message: "账户必须是字母， 且5位或者以上。", trigger: 'blur' }
    ],
    upass: [
        { required: true, message: "密码不能为空", trigger: 'blur' }
    ],
    twopass: [
        { required: true, message: '请确认新密码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                if (value !== formData.value.upass) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback()
                }
            }, trigger: 'blur'
        }
    ],
    identifyCode: [
        // { required: true, message: '请输入验证码', trigger: 'blur' },
        {
            validator: (rule, value, callback) => {
                console.log('验证码：', value);

                if (value !== identifyCode.value) {
                    ElMessage.error('验证码错误')
                    // callback(new Error('验证码错误'));
                } else {
                    callback()
                }
            }, trigger: 'blur'
        }
    ]
}

let onSubmit = (formEl) => {
    formEl.validate(v => {
        if (v) {
            sys.register(formData.value.uname, formData.value.upass).then(resp => {
                if (resp) {
                    ElMessage.success("注册成功")
                    // sessionStorage.setItem("loginName", resp)
                    router.push({ path: "/login", query: { loginName: resp } })
                }
            })
        }
    });
}

// 生成随机数
const randomNum = (min, max) => {
    max = max + 1
    return Math.floor(Math.random() * (max - min) + min)
}
// 随机生成验证码字符串
const makeCode = (o, l) => {
    for (let i = 0; i < l; i++) {
        identifyCode.value += o[randomNum(0, o.length - 1)].toString()
    }
    console.log(identifyCode.value);

}
// 更新验证码
const refreshCode = () => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
}

const toLogin = () => {
    router.push('/login')
}

// 组件挂载
onMounted(() => {
    identifyCode.value = ''
    makeCode(identifyCodes.value, 4)
})
</script>

<style scoped>
.login-div {
    width: 100%;
    height: 100%;
    background-image: url(../views/depot/bgimg.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.login-bg {
    position: fixed;
    left: 50%;
    top: 16%;
    margin-left: -543px;
    height: 100%;
}

.login-hz {
    float: left;
    width: 100%;
    z-index: 99;
    height: 70%;
}

.login-title {
    margin-top: 70px;
    font-size: 36px;
    text-align: center;
    color: #666666;
}

.btn {
    width: 245px;
    height: 38px
}

a {
    margin-left: 155px;
    color: #2395FF;
    text-decoration: none
}

.bgimg {
    float: left;
    height: 100%;
}

.login-box {
    position: relative;
    width: 340px;
    height: 520px;
    background: #fff;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 2px 6px 0 rgb(200 200 200);
    overflow: hidden;
}

.el-form {
    margin: 50px;
}

.col {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
</style>
